<template>
   <header>
        <h3>任务发布</h3>
        <ul>
            <li v-for="(item,index) in top" :key="item" @click="$emit('setlight',index)" :class="{light:cur==index}">{{item}}</li>
        </ul>
        <input type="text" placeholder="请输入任务名称进行查询" @input="search">
    </header>
</template>

<script>
export default {
    props:["top","cur"],
    methods:{
        search(e){
            this.$emit("search",e.target.value)
            // e.target.value=''
        }
    }
}
</script>

<style lang="less" scoped>
    header{
        padding: 10px;
        width: 100%;
        height: 50px;
        border-bottom: 2px solid #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        ul{
            display: flex;
            li{
                border: 1px solid #fff;
                padding: 5px 10px;
                margin: 0 5px;
                color: #fff;
            }
        }
        input{
            width: 200px;
            height: 30px;
            border: 0;
            outline: 0;
            padding-left: 5px;
        }
    }
    .light{
        background: orangered;
        color: #fff;
    }
</style>